<script setup lang='ts'>
// 主播收益详情
import { useRenderIcon } from '@/components/ReIcon/src/hooks';
import CountInfoVue from './countinfo.vue'

import { ref } from 'vue';
const searchTime = ref('');
/**
 * 处理表格排序改变时
 */
function handleSortChange() {

}


/**
 * 赛事详情
 */
const showEvents = ref(false)
function showEventDetail(row: any) {
  showEvents.value = true

}


/**
 * 礼物详情
 */
const showGifts = ref(false)
function showGiftsDetail(row: any) {
  showGifts.value = true

}

</script>

<template>
  <ElCard>
    <ElDrawer title="场次时间" v-model="showEvents">
      <ElTable>
        <ElTableColumn align="center" label="刷新玩家" prop="key" />
        <ElTableColumn align="center" label="刷新次数" prop="key" />
        <ElTableColumn align="center" label="消耗元宝" prop="key" />
      </ElTable>
    </ElDrawer>
    <ElDrawer title="打赏玩家:{{ 名字 }}" v-model="showGifts">
      <ElTable>
        <ElTableColumn align="center" label="礼物名字" prop="key" />
        <ElTableColumn align="center" label="礼物类型" prop="key" />
        <ElTableColumn align="center" label="赠送时间" prop="key" />
        <ElTableColumn align="center" label="赠送场景" prop="key" />
      </ElTable>
    </ElDrawer>
    <div class="flex justify-between mb-8">
      <div>机构/主播名称</div>
      <ElDatePicker v-model="searchTime" type="date" placeholder="选择查询时间" :clearable="false" />
    </div>
    <ElTabs>
      <ElTabPane label="赛季卡">
        <ElTable border @sort-change="handleSortChange" :data="[]" class="mt-8">
          <ElTableColumn align="center" label="开通玩家" prop="key" />
          <ElTableColumn align="center" label="玩家来源" prop="key" />
          <ElTableColumn align="center" label="分成比" prop="key" />
          <ElTableColumn align="center" label="开通时间" prop="key" />
          <ElTableColumn align="center" label="开通类型" prop="key" />
          <ElTableColumn align="center" label="开通个数" prop="key" />
          <ElTableColumn align="center" label="开通场景" prop="key" />
          <ElTableColumn align="center" label="主播分成金元" prop="key" />
        </ElTable>
      </ElTabPane>
      <ElTabPane label="赛事">
        <ElTable border @sort-change="handleSortChange" :data="[{}]" class="mt-8">
          <ElTableColumn align="center" label="场次" prop="key" />
          <ElTableColumn align="center" label="刷新人数" prop="key" />
          <ElTableColumn align="center" label="刷新次数" prop="key" />
          <ElTableColumn align="center" label="消耗金额" prop="key" />
          <ElTableColumn align="center" label="主播分成金元" prop="key" />
          <ElTableColumn align="center" label="操作">
            <template #="{ row }">
              <ElButton @click="showEventDetail(row)" text :icon="useRenderIcon('icon-park-outline:history-query')">
              </ElButton>
            </template>
          </ElTableColumn>
        </ElTable>
      </ElTabPane>
      <ElTabPane label="礼物">
        <ElTable border @sort-change="handleSortChange" :data="[{}]" class="mt-8">
          <ElTableColumn align="center" label="打赏玩家" prop="key" />
          <ElTableColumn align="center" label="礼物数量" prop="key" />
          <ElTableColumn align="center" label="礼物总金元" prop="key" />
          <ElTableColumn align="center" label="分成金元" prop="key" />
          <ElTableColumn align="center" label="操作">
            <template #="{ row }">

              <ElButton @click="showGiftsDetail(row)" text :icon="useRenderIcon('icon-park-outline:history-query')">
              </ElButton>
            </template>
          </ElTableColumn>
        </ElTable>
      </ElTabPane>

    </ElTabs>
  </ElCard>
</template>

<style lang='scss' scoped></style>
